<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>代币充值</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/statics/layui/css/layui.css" media="all">
  <style>
    .validate{
      position:absolute;
      left:110px;
      top:3px;
    }
    .layui-table-cell{
      height: 31px;
      line-height: 31px;
    }
    .layui-tab-brief>.layui-tab-title .layui-this{
      color: #3b85c8;
    }
    .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{
      border-bottom: 2px solid #3b85c8;
    }
  </style>
</head>

<body>

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>代币充值</legend>
  </fieldset>
  <!-- <blockquote class="layui-elem-quote">
    余额： <span id="spanMoney" class="layui-badge layui-bg-orange">0</span>
  </blockquote> -->
  <div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title">
      <li class="layui-this">充值</li>
      <li id="liLog" class="">订单记录</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
      <div class="layui-tab-item layui-show">
        <form class="layui-form" action="" lay-filter="form">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label" style="padding-top:2px;">充值流程</label>
              <div class="layui-input-inline" style="width: 690px; line-height: 25px;">
                （1）选择代币类型（ETH、BTC等），输入充值数量、验证码和交易密码；<br />
                （2）提交成功后系统生成充值的订单号，请记住该订单号（默认待支付）；<br />
                （3）在历史订单中找到该订单，进行支付（显示打币地址和二维码）；<br />
                （4）通过以太网钱包进行打币，请备注该订单号（订单号用于管理员查询您的充值记录）；<br />
                （5）打币成功后，点击确认支付后，耐心等待管理员审核发币。<br />
              </div>
            </div>
          </div>
          <div class="layui-form-item bank">
            <label class="layui-form-label"><span class="layui-required">*</span> 代币类型</label>
            <div class="layui-input-inline" style="width: 150px;">
              <select id="tbMoneyTypeId" name="typeId" lay-filter="tbMoneyTypeId">
              </select>
            </div>
            <div class="layui-form-mid layui-word-aux">
              手续费：<span id="tipBrokePercent" style="color:red">0</span> %
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label"><span class="layui-required">*</span> 充值数量</label>
              <div class="layui-input-inline" style="width: 150px;">
                <input id="money" type="text" name="money" placeholder="￥" lay-verify="required|number" autocomplete="off"
                  class="layui-input" maxlength="10" />
              </div>
              <div class="layui-form-mid layui-word-aux">
                  实际到账：<span id="tipRealMoney" style="color:green">0</span>&nbsp;&nbsp;&nbsp;
                  手续费：<span id="tipBrokeMoney" style="color:red">0</span>
                </div>
            </div>
          </div>
          <div class="layui-form-item" id="itemValidate">
            <div class="layui-inline">
              <label class="layui-form-label"><span class="layui-required">*</span> 验证码</label>
              <div class="layui-input-inline" style="width: 300px;">
                <input id="validateCode" type="text" name="validateCode" lay-verify="required" autocomplete="off" class="layui-input"
                  style="width:100px;" maxlength="4" />
                <div class="validate">
                  <a href="javascript:void(0);" onclick="CreateVerificationCode()" title="点击刷新验证码"><img id="randCodeImage"
                      style="border:0px;" /></a>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"><span class="layui-required">*</span> 交易密码</label>
            <div class="layui-input-inline">
              <input type="password" name="dealPassword" lay-verify="required|dealpass" placeholder="请输入交易密码" autocomplete="off"
                class="layui-input" maxlength="6" />
            </div>
            <div class="layui-form-mid layui-word-aux">请填写6位数字</div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button id="btn_submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo">提交充值</button>
            </div>
          </div>
        </form>
      </div>
      <div class="layui-tab-item">
        <table class="layui-hide" id="dg" lay-filter="dg"></table>
        <script type="text/html" id="barStatus">
          {{#  if(d.checkStatus == -1){ }}
          <!-- <span style="color:gray;">待支付</span> -->
          <a class="layui-btn layui-btn-sm" lay-event="pay">支付</a>
          <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="cancle">取消</a>
          {{#  } else if(d.checkStatus == 0){ }}
            <span style="color:blue;">待发币</span>
          {{#  } else if(d.checkStatus == 1){ }}
            <span style="color:green;">充值成功</span>
          {{#  } else if(d.checkStatus == 2){ }}
          <!-- <span style="color:red;">充值失败</span> -->
          <a class="layui-btn layui-btn-sm" lay-event="pay">重新支付</a>
          <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="cancle">取消</a>
          {{#  } else if(d.checkStatus == -2){ }}
            <span style="color:gray;">已取消</span>
          {{#  } }}
        </script>
        <script type="text/html" id="bar">
          {{#  if(d.checkStatus == -1){ }}
            <a class="layui-btn layui-btn-sm" lay-event="pay">支付</a>
            <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="cancle">取消</a>
          {{#  } else if(d.checkStatus == 2){ }}
            <a class="layui-btn layui-btn-sm" lay-event="pay">重新支付</a>
            <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="cancle">取消</a>
          {{#  } }}
        </script>
      </div>

    </div>
  </div>

  <script src="/statics/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="../js/config.js"></script>
  <script type="text/javascript" src="../js/utils.js"></script>
  <script>
    var model = null, orderModel = null, typeList = [], layer;
    var MyRecharge = {
      "init": function () {
        DataUtils.getMoneyTypeList0(function (data) {
          typeList = data;
          if (data) {
            $.each(data, function (i, item) {
              $("#tbMoneyTypeId").append("<option value='" + item.typeId + "'>" + item.typeName + "</option>");
            });
          }
          MyRecharge.initForm();
          MyRecharge.setBrokePercent();
        });
      },
      "initForm": function () {
        layui.use(['form', 'layer', 'element', 'table'], function () {
          var form = layui.form, element = layui.element, table = layui.table;
          layer = layui.layer;

          //自定义验证规则
          form.verify({
            pass: [/(.+){6,12}$/, '密码必须6到12位'],
            dealpass: [/^\d{6}$/, '交易密码必须6位数字']
          });

          form.on('select(tbMoneyTypeId)', function(data){
            MyRecharge.setBrokePercent();
          });

          //算出手续费和实际到账数量
          $("#money").on('change', function () {
            var m1 = $("#money").val();
            if (ValidateUtils.isFloat(m1)) {
              m1 = parseFloat(m1);
              if(m1<0.0001){                
                layer.alert('充值金额不能小于0.0001！', { title: '出错了', icon: 5 }, function (index) {
                  $("#money").val('');
                  $("#money").focus();
                  $("#tipBrokeMoney").text(0);
                  $("#tipRealMoney").text(0);
                  layer.close(index);
                });
              }
              for(var i=0;i<typeList.length;i++){
                if(typeList[i].typeId == $("#tbMoneyTypeId").val()){
                  var brokePercent = parseFloat(typeList[i].rechargeBrokePercent);
                  if(brokePercent>0){
                    var brokeMoney = parseFloat(m1 * brokePercent / 100);
                    var realMoney = parseFloat((m1 / 100)*(100-brokePercent));
                    $("#tipBrokeMoney").text(FormatUtils.formatFloat8(brokeMoney));
                    $("#tipRealMoney").text(FormatUtils.formatFloat8(realMoney));
                  }else{
                    $("#tipBrokeMoney").text(0);
                    $("#tipRealMoney").text(m1);
                  }
                }
              }
            } else {
              layer.alert('请输入整数或者小数！', { title: '出错了', icon: 5 }, function (index) {
                $("#money").val('');
                $("#money").focus();
                $("#tipBrokeMoney").text(0);
                $("#tipRealMoney").text(0);
                layer.close(index);
              });
            }
          });

          //监听提交
          form.on('submit(demo)', function (data) {
            var json = data.field;
            json.money = parseFloat(json.money);
            var typeName = $("#tbMoneyTypeId").find("option:selected").text();
            layer.confirm('确定要充值 ' + json.money + ' (' + typeName + ') 吗?', { icon: 3, title: '提示' }, function (index) {
              var url = Config.WEB_SERVER_API + Config.URI.USER_MONEY_RECHARGE_SAVE;
              HttpUtils.httpPost(url, json, function (result, success) {
                if (success) {
                  table.reload("dg", {});
                  CreateVerificationCode();
                  layer.alert('请支付订单号：<span color="red">' + result.resultMsg + '</span>', { title: '提交成功' }, function(index){
                    $("#liLog").click();
                    layer.close(index);
                  });
                } else {
                  layer.alert(result.resultMsg, { title: '出错了', icon: 5 });
                }
              });
              layer.close(index);
            });
            return false;
          });

          table.render({
            elem: '#dg',
            url: Config.WEB_SERVER_API + Config.URI.USER_MONEY_RECHARGE_LIST,
            cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cols: [[
              { field: 'id', title: 'ID', hide: true }
              , { fixed: 'left', field: 'orderId', align:'center', title: '订单号', width: 190 }
              , { fixed: 'left', field: 'typeName', align:'center', title: '币种', width: 80 }
              , { fixed: 'left', field: 'checkStatusName', align:'center', title: '状态', toolbar: '#barStatus', width: 160 }
              // , { fixed: 'left', title: '操作', align:'center', toolbar: '#bar', width: 160 }
              , { field: 'money', title: '充值数量', width: 100 }
              , { field: 'brokeMoney', title: '手续费', width: 100, templet: function (d) { return '<span style="color:green;">'+d.brokeMoney+'</span>'; } }
				      , { field: 'realMoney', title: '到账数量', width: 100, templet: function (d) { return '<span style="color:red;">'+d.realMoney+'</span>'; } }
              , { field: 'createTime', title: '提交时间', width: 160, templet: function (d) { return FormatUtils.parseTimestampToDateTime(d.createTime); } }
              , { field: 'checkTime', title: '发币时间', width: 160, templet: function (d) { return d.checkTime ? FormatUtils.parseTimestampToDateTime(d.createTime) : ''; } }
            ]],
            page: false, loading: true,
            response: {
              statusCode: "200" //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
              return {
                "code": parseInt(res.resultCode), //解析接口状态
                "msg": res.resultMsg, //解析提示文本
                "count": res.total, //解析数据长度
                "data": res.rows //解析数据列表
              };
            }
          });

          //监听行工具事件
          table.on('tool(dg)', function (obj) {
            orderModel = obj.data;
            if (obj.event === 'pay') {
              var t = new Date().getTime();
              UIUtils.openWindow('我要支付', 'myrechargepay.html?t=' + t, 500, 490);
            }else if (obj.event === 'cancle') {
              layer.confirm('确定要取消充值订单 ' + orderModel.orderId + ' 吗?', { icon: 3, title: '提示' }, function (index) {
                var url = Config.WEB_SERVER_API + Config.URI.USER_MONEY_RECHARGE_CANCLE;
                HttpUtils.httpPost(url, orderModel, function (result, success) {
                  if (success) {
                    layer.alert('订单已取消！', { title: '订单成功' }, function(index){
                      table.reload("dg", {});
                      layer.close(index);
                    });
                  } else {
                    layer.alert(result.resultMsg, { title: '出错了', icon: 5 });
                  }
                });
                layer.close(index);
              });
              return false;
            }
          });

        });
      },
      "setBrokePercent":function(){
        for(var i=0;i<typeList.length;i++){
          if(typeList[i].typeId == $("#tbMoneyTypeId").val()){
            $("#tipBrokePercent").text(typeList[i].rechargeBrokePercent);
          }
        }        
      }
    }
    $(function () {
      MyRecharge.init();
      CreateVerificationCode();
    });

    function CreateVerificationCode() {
      var rad = Math.floor(Math.random() * Math.pow(10, 8));
      //uuuy是随便写的一个参数名称，后端不会做处理，作用是避免浏览器读取缓存的链接
      $("#randCodeImage").attr("src", Config.WEB_SERVER_API + Config.URI.VERIFICATION_CODE + "?uuuy=" + rad);
    }
  </script>

</body>

</html>